<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<style type="text/css">
			.title{
				padding: 20px 0 10px 20px;
			}
			.title:before{
				content: '';
				position: absolute;
				left: 11px;
				height: 16px;
				width: 4px;
				background: #ff5811;
				border-radius: 4px;
			}
			.item{
				width: 50%;
				padding-top: 10px;
				padding-bottom: 10px;
				float: left;
				position: relative;
			}
			.item:nth-child(even){
				padding-right: 10px;
				padding-left: 5px;
			}
			.item:nth-child(odd){
				padding-left: 10px;
				padding-right: 5px;
			}
			.item-inner{
				text-align: center;
				background: #FFFFFF;
				position: relative;
				border: 1px solid #DDDDDD;
				padding: 30px 5px 12px;
			}
			.item-inner .tit{
				position: absolute;
				line-height: 20px;
				
			}
			.item-inner .extras{
				display: flex;
				display: -webkit-flex;
			}
			.item-inner .extras>div{
				flex: 1;
				-webkit-flex: 1;
				align-items: center;
				-webkit-align-items: center;
				position: relative;
			}
			
			.item-inner .extras>div:nth-of-type(1):after{
				content: "";
				position: absolute;
				right: -1px;
				bottom: 4px;
				height: 32px;
				width: 1px;
				background: #DDDDDD;
			}
			.item-inner .extras span{
				display: block;
			}
			.discount{
				position: absolute;
				right: 5px;
				top: -4px;
				background: url(images/discount.png);
				width: 48px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				background-size: contain;
				color: #FFFFFF;
				font-size: 12px;
			}
			
			
			
			
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
		    <h1 class="mui-title">首页</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item my-active" data-id="0" data-href="index.html">
				<span class="mui-icon iconfont icon-shouye"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="1" data-href="company_news.html">
				<span class="mui-icon iconfont icon-xiaoxi1"></span>
				<span class="mui-tab-label">公司动态</span>
			</a>
			<a class="mui-tab-item" data-id="2" data-href="my_center.html">
				<span class="mui-icon iconfont icon-wode1"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content" id="app">
			<div class="mui-slider">
			  <div class="mui-slider-group">
			    <div class="mui-slider-item"><a href="#"><img src="images/banner.png" /></a></div>
			    <div class="mui-slider-item"><a href="#"><img src="images/banner.png" /></a></div>
			    <div class="mui-slider-item"><a href="#"><img src="images/banner.png" /></a></div>
			    <div class="mui-slider-item"><a href="#"><img src="images/banner.png" /></a></div>
			  </div>
			  <div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
			</div>
			<div class="wrap" id="supply_chain">
				<h3 class="title f_16 color_4">供应链</h3>
				<div class="mui-clearfix">
					<div class="item">
						<div class="item-inner">
							<h2 class="f_16 color_1 tit mui-ellipsis-2">高校团餐-珍轩餐饮1期</h2>
							<h3 class="f_20 color_4 mb_5 pt_55">12.0<span class="f_16">%</span></h3>
							<h4 class="f_14 color_5 mb_15">年利率</h4>
							<h3 class="f_20 color_4 mb_5">1<span class="f_16">个月</span></h3>
							<h4 class="f_14 color_5 mb_15">还款期限</h4>
							<div class="extras">
								<div>
									<span class="f_14 color_1">￥200000</span>
									<span class="f_13 color_3">借款总额</span>
								</div>
								<div>
									<span class="f_14 color_1">￥200000</span>
									<span class="f_13 color_3">起投金额</span>
								</div>
							</div>
							<div class="discount">
								50%
							</div>
						</div>
					</div>
					<div class="item">
						<div class="item-inner">
							<h2 class="f_16 color_1 tit mui-ellipsis-2">高校团餐-珍轩餐饮1期</h2>
							<h3 class="f_20 color_4 mb_5 pt_55">12.0<span class="f_16">%</span></h3>
							<h4 class="f_14 color_5 mb_15">年利率</h4>
							<h3 class="f_20 color_4 mb_5">1<span class="f_16">个月</span></h3>
							<h4 class="f_14 color_5 mb_15">还款期限</h4>
							<div class="extras">
								<div>
									<span class="f_14 color_1">￥200000</span>
									<span class="f_13 color_3">借款总额</span>
								</div>
								<div>
									<span class="f_14 color_1">￥200000</span>
									<span class="f_13 color_3">起投金额</span>
								</div>
							</div>
							<div class="discount">
								50%
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="vue/vue.min.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script type="text/javascript">
			
			(function($,doc){
				$.init({
					statusBarBackground:'#efeff4'
				});
				if($.os.plus){
					
				}else{
					//去掉头部标题栏
					doc.getElementsByClassName("mui-bar-nav")[0].style.display="none";
					doc.getElementById("app").style.paddingTop=0;
				}
				$.ready(function() {
					$('#app').pullToRefresh({
						down: {
							callback: function() {
								this.endPullDownToRefresh();
							}
						}
					});
					$('#supply_chain').pullToRefresh({
						up: {
							callback: function() {
								
							}
						}
					})
				});
				var detail_view=null;
				var titleNView = { //详情页原生导航配置
					backgroundColor: '#efeff4', //导航栏背景色
					titleText: '', //导航栏标题
					titleColor: '#000000', //文字颜色
					type: 'transparent', //透明渐变样式
					splitLine:{color:'#d2d2d2'},
					autoBackButton: true //自动绘制返回箭头
				}
				$.plusReady(function(){
					//禁止出现滚动条
					plus.webview.currentWebview().setStyle({
	                    scrollIndicator: 'none'
	             	});
	             	//仅支持竖屏显示
					plus.screen.lockOrientation("portrait-primary");
					detail_view=$.preload({
						url:'financial_detail.html',
						id:'financial_detail.html',
						styles:{
	                		"render":"always",
	                		"popGesture":"hide",
	                		"bounce": "none",
							"statusbar":{
								'background':'#000000'
							}
	                	}
					});
					
				});
				$('.mui-slider').slider({
				  interval:0
				});
				$("#supply_chain").on("tap",".item",function(){
					if($.os.plus){
						detail_view.show('pop-in',300)
					}else{
						location.href="financial_detail.html";
					}
					
				});
				app.navTab();
			}(mui,document));
		</script>
	</body>

</html>